<template>
  <div class="RootBox">
    <div class="wanjun">
      <div class="mbnav">
        <div class="mbnavsontwo">
          <div class="mobile searchfather">
            <!-- 右侧输入框 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="标题">
                <el-input v-model="formInline.title" placeholder="类型"></el-input>
              </el-form-item>
              <el-form-item label="职称类型">
                <el-cascader
                  v-model="formInline.tableHierarchy"
                  :options="optionsHierarchy"
                  :props="{
                    label: 'name',
                    value: 'hierarchy',
                    children: 'children'
                  }"
                  @change="handleChange"
                ></el-cascader>
              </el-form-item>
              <el-form-item label="寻证要求">
                <el-input v-model="formInline.required" placeholder="寻证要求"></el-input>
              </el-form-item>
              <el-form-item label="发布地址">
                <el-input v-model="formInline.publishAddress" placeholder="说明"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button class="search" size="mini" type="primary" @click="seachUser">搜索</el-button>
                <el-button class="search" size="mini" type="primary" @click="resetResult">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 左侧图标 -->
        <el-row class="iconlist">
          <span class="mobile">
            <el-button plain size="mini" class="addUser" icon="iconfont icon-plus-creat" @click="Addhandler"
              >新建</el-button
            >
          </span>
          <span class="mobile">
            <el-button @click="getsysPostList" class="Refresh" size="mini" icon="iconfont icon-ico_reset"
              >刷新</el-button
            >
          </span>
        </el-row>
        <el-dialog
          :title="falg ? '新建职位' : '编辑职位'"
          :close-on-click-modal="false"
          :visible.sync="AddOrganization"
          width="500px"
          @closed="cleardialog()"
          @open="openDialogHandler()"
        >
          <div>
            <el-form :model="form" ref="form">
              <!-- :rules="rules" -->
              <el-form-item label="标题" prop="title" :label-width="formLabelWidth">
                <el-input v-model.trim="form.title" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="联系人" prop="linkman" :label-width="formLabelWidth">
                <el-input v-model.trim="form.linkman" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="mobile" :label-width="formLabelWidth">
                <el-input v-model.trim="form.mobile" autocomplete="off"></el-input>
                <!-- <UploadCom v-model.trim="form.mobile" @change="changeHandler"> </UploadCom> -->
              </el-form-item>
              <el-form-item label="QQ号码" prop="qq" :label-width="formLabelWidth">
                <el-input v-model.trim="form.qq" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="公司名称" prop="companyName" :label-width="formLabelWidth">
                <el-input v-model.trim="form.companyName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="工作地点" prop="regionHierarchy" :label-width="formLabelWidth">
                <el-cascader
                  ref="cascader1"
                  v-model="form.regionHierarchy"
                  :options="options"
                  :props="{
                    label: 'name',
                    value: 'hierarchy',
                    children: 'children'
                  }"
                  @change="handleChange"
                ></el-cascader>
              </el-form-item>
              <el-form-item label="职称类型" prop="tableHierarchy" :label-width="formLabelWidth">
                <el-cascader
                  ref="cascader"
                  v-model="form.tableHierarchy"
                  :options="optionsHierarchy"
                  :props="{
                    label: 'name',
                    value: 'hierarchy',
                    children: 'children'
                  }"
                  @change="handleChangeHierarchy"
                ></el-cascader>
              </el-form-item>
              <el-form-item label="寻证要求" prop="required" :label-width="formLabelWidth">
                <el-input v-model.trim="form.required" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="发布地址" prop="publishAddress" :label-width="formLabelWidth">
                <el-input v-model.trim="form.publishAddress" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="薪资(年)" prop="salary" :label-width="formLabelWidth">
                <el-input placeholder="不填写默认面议" v-model="form.salary">
                  <template slot="append">年</template>
                </el-input>
              </el-form-item>
              <el-form-item label="描述" prop="comments" :label-width="formLabelWidth">
                <el-input v-model.trim="form.comments" autocomplete="off" type="textarea"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" v-if="falg" class="dialog-footer">
              <el-button class="clear" @click="AddOrganization = false">取 消</el-button>
              <el-button type="primary" @click="SubmitAddhandler('form')">确 定</el-button>
            </div>
            <div slot="footer" v-else class="dialog-footer">
              <el-button class="clear" @click="AddOrganization = false">取 消</el-button>
              <el-button type="primary" @click="SubmitUpdatehandler('form')">确 定</el-button>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
    <!-- 表格模块 -->
    <div class="table">
      <div class="table2">
        <el-table
          height="550"
          stripe
          ref="multipleTable"
          :data="PostList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          border=""
          size="mini"
          :header-cell-style="{ background: '#eff3f8', color: '#606266' }"
        >
          <!-- <el-table-column type="selection" width="55"></el-table-column> -->
          <!-- <el-table-column prop="sort" sortable label="序号"></el-table-column> -->
          <el-table-column prop="title" label="标题"></el-table-column>
          <el-table-column prop="linkman" label="联系人"></el-table-column>
          <el-table-column prop="mobile" label="手机号"> </el-table-column>
          <el-table-column prop="qq" label="QQ号码"> </el-table-column>
          <!-- <el-table-column prop="qq" label="QQ号码" :formatter="formatter"></el-table-column> -->
          <el-table-column prop="required" label="寻证要求"></el-table-column>
          <el-table-column prop="salary" label="薪资"></el-table-column>
          <el-table-column prop="required" label="寻证要求"></el-table-column>
          <el-table-column prop="publishAddress" label="发布地址"></el-table-column>
          <el-table-column prop="companyName" label="公司名称"></el-table-column>
          <el-table-column prop="tableName" label="职称类型"></el-table-column>
          <!-- <el-table-column prop="regionName" label="工作地点"></el-table-column> -->
          <el-table-column prop="comments" label="详细说明"></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <div>
                <el-button size="mini" class="updateUser" @click="updateHandeler(scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="deleteHandler(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <Pagecomponent
          :total="total"
          ref="pagecom"
          :pagesizelist="[10, 20]"
          @getAdminRative="getAdminRative"
          :Pagesize="pageSize"
          :currentPage="currentPage"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { flatPidToTree, showTreeLayKeys } from '@/utils/tools/common'
import Pagecomponent from '@/components/custom/PageCom.vue'
import { clearSpace } from '@/utils/tools/funtctionAPI.js'
import authorityApi from '@/utils/tools/authorityApi/index.js'
import { local } from '@/utils/jcore/storage'
import UploadCom from '@/components/custom/UploadImage.vue'
const userInfo = local.get('userInfo')
export default {
  name: 'userGroup',
  components: {
    UploadCom,
    Pagecomponent
  },
  props: {},
  data() {
    return {
      falgdebounce: true,
      falg: true,
      Selcetweight: '', //下拉框绑定的值
      formInline: {
        title: '',
        tableHierarchy: [],
        required: '',
        publishAddress: ''
      }, // 搜索对象
      dialogFormVisible: false, // 弹出层1默认是否显示
      pageSize: 10, //每页条数
      currentPage: 1, //当前页面页码
      total: 0, //总条数
      deleteIdList: '', //当前删除数组Id
      AddOrganization: false, //弹出框显示和隐藏
      UpdateOrganization: false,
      userKeyWords: '',
      clickdata: {
        id: ''
      },
      degPageTypelist: null,
      updateList: [],
      form: {
        // 表单验证数据
        linkman: '',
        mobile: '',
        qq: '',
        regionHierarchy: '',
        tableHierarchy: '',
        companyName: '',
        salary: '',
        title: '',
        publishAddress: '',
        comments: ''
      },
      tableName: '',
      options: [],
      optionsHierarchy: [],
      name: '',
      PostList: [], //当前用户组所有下级用户组
      PostId: '',
      PostFatherList: {}, //当前用户组信息
      formUser: {},
      datalist: [],
      formLabelWidth: '120px',
      defaultProps: {
        label: 'name'
      },
      postdata: {
        roleIds: [],
        users: []
      },
      userdialog: false,
      rolesdialog: '',
      //   弹出框验证
      rules: {
        name: [{ required: true, message: '名称不能为空' }],

        comments: [{ required: true, message: '描述信息不能为空' }]
      }
    }
  },
  created() {
    this.userInfo = userInfo
    this.getsysPostList()
    // 获取字典值
    this.getdictList()
    this.getoptionsHierarchy()
  },
  mounted() {},
  methods: {
    getdictList() {
      authorityApi.dictApi.getDictory(
        {
          hierarchy: '/5qWm/'
        },
        (res) => {
          console.log(res)
          res = res.filter((item) => item.hierarchy.length > 6)
          this.options = flatPidToTree(res)
        }
      )
    },
    //获取职称类型

    getoptionsHierarchy() {
      authorityApi.dictApi.getDictory(
        {
          hierarchy: '/r6t8/'
        },
        (res) => {
          console.log(res)
          res = res.filter((item) => item.hierarchy.length > 6)
          this.optionsHierarchy = flatPidToTree(res)
        }
      )
    },
    handleChange(res) {},
    handleChangeHierarchy(res) {
      // getCheckedNodes

      let list = this.$refs.cascader.getCheckedNodes()

      let newList = list[0].pathNodes.map((item) => item.label).join('-')
      if (list[0].pathNodes.length == 1) {
        newList = '职称-' + newList
      }

      this.tableName = newList
    },

    getsysPostList(list) {
      if (list && list.length > 0) {
        this.pageSize = list[0]
        ;(this.currentPage = list[1]), this.formInline
      }
      let data = this.formInline
      if (this.formInline.tableHierarchy) {
        data.tableHierarchy = this.formInline.tableHierarchy[0]
      }
      authorityApi.bsRecruitmentApi.getpage(
        {
          pageSize: this.pageSize,
          currentPage: this.currentPage,
          loading: true,
          ...data
        },
        (res) => {
          this.total = res.total
          this.PostList = res.records
        }
      )
    },
    // 新建用户组
    Addhandler() {
      this.falg = true
      this.AddOrganization = true
    },
    //弹出框打开之前的回调
    openDialogHandler() {
      if (this.falg) {
        //新建
      } else {
        //编辑

        authorityApi.bsRecruitmentApi.getById({ id: this.PostId }, (res) => {
          this.form = res
          if (res.regionHierarchy) {
            if (res.regionHierarchy.length > 11) {
              this.form.regionHierarchy = [
                res.regionHierarchy.substring(0, res.regionHierarchy.length - 5),
                res.regionHierarchy
              ]
            } else {
              this.form.regionHierarchy = [res.regionHierarchy]
            }
          }
          if (res.tableHierarchy) {
            if (res.tableHierarchy.length > 11) {
              ;[res.tableHierarchy.substring(0, res.tableHierarchy.length - 5), res.tableHierarchy]
            } else {
              this.form.tableHierarchy = [res.tableHierarchy]
            }
          }
          console.log(this.form)
        })
      }
    },
    // 新建用户组表单提交
    SubmitAddhandler(row) {
      this.$refs[row].validate((value) => {
        if (value) {
          let dataForm = JSON.parse(JSON.stringify(this.form))
          if (this.form.regionHierarchy) {
            dataForm.regionHierarchy = this.form.regionHierarchy[this.form.regionHierarchy.length - 1]
          }
          if (this.form.tableHierarchy) {
            dataForm.tableHierarchy = this.form.tableHierarchy[this.form.tableHierarchy.length - 1]
          }
          dataForm.tableName = this.tableName || ''
          let data = { ...dataForm, loading: true }
          data = clearSpace(data)
          authorityApi.bsRecruitmentApi.save(data, (res) => {
            this.$message({
              type: 'success',
              message: res
            })
            this.AddOrganization = false
            this.form = {}
            this.getsysPostList()
          })
        } else {
          return false
        }
      })
    },
    getAdminRative(list) {
      this.getsysPostList(list)
    },
    handleSelectionChange(row) {
      this.deleteIdList = row.map(({ id }) => {
        return id
      })
      this.updateList = this.deleteIdList
      this.updateList = JSON.parse(JSON.stringify(row))
      this.deleteIdList = this.deleteIdList.join(',')
    },
    //删除用户组事件
    deleteDutyHandler(row) {
      if (row.id) {
        this.$confirm('此操作将永久删除该用户组, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            let data = {
              groupIds: row.id,
              loading: true
            }
            authorityApi.bsRecruitmentApi.delete(data, (res) => {
              this.$message({
                type: 'success',
                message: res
              })
              this.getsysPostList()
            })
          })
          .catch(() => {
            this.$refs.multipleTable.clearSelection()
          })
      } else {
        if (this.deleteIdList.length === 0 && !row.id) {
          this.$message({
            type: 'error',
            message: '请先选择需要删除的用户组'
          })
        } else {
          this.$confirm('此操作将永久删除该用户组, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              let data = {
                groupIds: this.deleteIdList,
                loading: true
              }
              authorityApi.bsRecruitmentApi.delete(data, (res) => {
                this.$message({
                  type: 'success',
                  message: res
                })
                this.getsysPostList()
              })
            })
            .catch(() => {
              this.$refs.multipleTable.clearSelection()
            })
        }
      }
    },
    //编辑用户组事件
    updateHandeler(row) {
      if (row.id) {
        //判断当前是否是在表格编辑
        this.falg = false
        this.AddOrganization = true
        this.PostId = row.id
      }
    },
    //搜索用户组
    seachUser() {
      this.getsysPostList()
    },
    resetResult() {
      this.formInline = { title: '', type: '', required: '', publishAddress: '' }
      this.getsysPostList()
    },
    //提交编辑用户组事件
    SubmitUpdatehandler(formName) {
      this.$refs[formName].validate((value) => {
        if (value) {
          let dataForm = JSON.parse(JSON.stringify(this.form))
          if (this.form.regionHierarchy) {
            dataForm.regionHierarchy = this.form.regionHierarchy[this.form.regionHierarchy.length - 1]
          }
          if (this.form.tableHierarchy) {
            dataForm.tableHierarchy = this.form.tableHierarchy[this.form.tableHierarchy.length - 1]
          }
          dataForm.tableName = this.tableName || ''
          let data = { ...dataForm, loading: true }

          data = clearSpace(data)
          authorityApi.bsRecruitmentApi.update(data, (res) => {
            this.falg = true
            this.form = {}
            this.AddOrganization = false
            this.getsysPostList()
          })
        }
      })
    },
    //取消事件
    cleardialog() {
      if (this.$refs.form !== undefined) {
        this.$refs.form.resetFields()
        this.$refs.form.clearValidate()
      }
      this.$refs.form.clearValidate()
      this.form = {}
      this.$refs.multipleTable.clearSelection()
    },
    changeHandler(data) {
      this.form.imageUrl = data.filePath
    },
    //角色设置
    deleteHandler(row) {
      this.$confirm('此操作将永久删除当前商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          id: row.id,
          loading: true
        }
        authorityApi.bsRecruitmentApi.delete(data, (res) => {
          this.getsysPostList()
        })
      })
    },

    closeUser() {
      this.$refs.multipleTable.clearSelection()
    }
  },
  watch: {
    formInline(newvalue, oldvalue) {
      if (!newvalue) {
        this.getsysPostList()
      }
    },
    userKeyWords(newval, oldval) {
      if (!this.userKeyWords) {
        this.getsysPostList()
      }
    }
  }
}
</script>
<style lang="less" scoped>
.el-cascader {
  width: 100%;
}
.RootBox {
  background-color: #fff;
  height: 100%;
}
.iconlist {
  position: relative;
  align-items: center;
  margin-left: 20px;
}
/deep/ .el-table__body-wrapper .is-scrolling-right {
  width: 100%;
}
.table {
  background-color: #fff;
  .table2 {
    margin: 0 20px;
  }
}
/deep/.el-table th > .cell {
  text-align: center;
}

.mbnav {
  background-color: #fff;
  margin-bottom: 20px;
  .mbnavsontwo {
    margin-left: 24px;
    padding-top: 24px;
  }
  .mobile {
    line-height: 21px;
    margin-right: 25px;
  }
  .el-button--mini {
    font-size: 16px;
  }
}
/deep/ .el-breadcrumb__separator[class*='icon'] {
  color: #4285f4;
}
/deep/.el-dialog__body {
  padding: 30px 20px;
  color: #606266;
  font-size: 14px;
  // height: 452px;
  word-break: break-all;
  overflow-y: auto;
}
/deep/.el-breadcrumb__inner {
  color: #4285f4 !important;
  font-size: 14px;
}
/deep/.el-breadcrumb__inner.is-link {
  color: #4285f4 !important;
  font-size: 14px !important ;
}
.dialog-footer {
  text-align: center;
}

// /deep/ .el-button--primary {
//   margin-right: 50px;
// }
/deep/ .el-dialog__title {
  color: #4285f4;
}
/deep/ .el-dialog__header {
  border-bottom: 1px solid #4285f4;
}
/deep/ .cell {
  text-align: center;
}
/deep/.el-pagination {
  margin-top: 20px;
  text-align: center;
}
/deep/.aaaa {
  width: 100% !important;
  height: 500px !important;
}

.el-table thead {
  background-color: #f6f6f6 !important;
}

/deep/ :focus {
  outline: 0;
}
.clear {
  margin-right: 50px;
}
.weight /deep/ .el-scrollbar__wrap {
  overflow: scroll;
  height: 200px;
  text-align: center;
}
.dutyweight {
  width: 90px;
}
/deep/.el-form-item {
  margin-bottom: 30px;
}
/deep/.el-select {
  width: 100%;
}
.iconlist {
  align-items: center;
}
.input-with-select {
  margin-left: 30px !important;
}
.search {
  margin-left: 24px;
}
</style>
